<template>
    <div class="container">
        <div class="container-relative" @keyup.enter="handleLogin">
            <div class="wrapper widget-box" v-bind:class="{'visible': visibleLogin}">

                <div class="wrapper-body" v-loading="loading" element-loading-text="验证中，请稍等...">
                    <div class="wrapper-main">
                        <div class="header-login">
                            <img src="../../../static/img/logo/logo-237x50.png" alt="">
                        </div>
                        <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
                            <label class="block">
                                <el-form-item prop="account">
                                    <el-input v-model="loginForm.account" autofocus placeholder="支持用户名 / 手机号 / 邮箱登录"
                                              suffix-icon="el-icon-mars-user-name"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block">
                                <el-form-item prop="password">
                                    <el-input type="password" v-model="loginForm.password" placeholder="密码"
                                              suffix-icon="el-icon-mars-password"></el-input>
                                </el-form-item>

                            </label>

                            <div id="msg" v-show="showMsg" :class="success? 'success': 'failed'">{{ msg }}</div>

                            <div class="login-btn">
                                <label>
                                    <el-checkbox v-model="loginForm.remember" style="z-index: 0;">记住我</el-checkbox>
                                </label>
                                <label>
                                    <el-button
                                            type="primary" icon="el-icon-mars-key"
                                            :loading="loading"
                                            :disabled="loginBtoDisabled"
                                            @click="handleLogin">
                                        登录
                                    </el-button>
                                </label>
                            </div>
                        </el-form>

                        <div class="social-or-login">
                            <span class="bigger-110">第三方验证</span>
                        </div>
                        <div class="social-login">
                            <a href="javascript:;" class="weixin"><i class="el-icon-mars-weixin"></i></a>
                            <a href="javascript:;" class="qq"><i class="el-icon-mars-qq"></i></a>
                            <a href="javascript:;" class="weibo"><i class="el-icon-mars-weibo"></i></a>
                        </div>
                    </div>
                    <div class="toolbar login">
                        <a href="javascript:;" class="forgot-password-link" @click="forget"><i
                                class="el-icon-mars-arrowlefticon"></i> 忘记密码</a>
                        <a href="javascript:;" class="user-signup-link" @click="register">我想注册 <i
                                class="el-icon-mars-arrowrighticon"></i></a>
                    </div>
                </div>

            </div>
        </div>

        <div class="container-relative" @keyup.enter="handleForgetPassword">
            <div class="wrapper widget-box" v-bind:class="{'visible': visibleForget}">

                <div class="wrapper-body">
                    <div class="wrapper-main">
                        <div class="header-forget">
                            <i class="el-icon-mars-key"></i> 找回密码
                        </div>
                        <el-form :model="forgetForm" ref="forgetForm" :rules="forgetRules">
                            请输入你的邮箱地址:
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="email">
                                    <el-input v-model="forgetForm.email" autofocus placeholder="邮件地址"
                                              suffix-icon="el-icon-mars-msg"></el-input>
                                </el-form-item>
                            </label>
                            <div class="forget-btn">
                                <label>
                                    <el-button type="danger" icon="el-icon-mars-key" @click="handleForgetPassword">找回密码
                                    </el-button>
                                </label>
                            </div>
                        </el-form>

                    </div>
                    <div class="toolbar center forget">
                        <a href="javascript:;" class="forgot-password-link" @click="back"><i
                                class="el-icon-mars-arrowlefticon"></i> 返回登录</a>
                    </div>
                </div>

            </div>
        </div>

        <div class="container-relative" @keyup.enter="handleRegister">
            <div class="wrapper widget-box" v-bind:class="{'visible': visibleRegister}">

                <div class="wrapper-body">
                    <div class="wrapper-main">
                        <div class="header-register">
                            <i class="el-icon-mars-user-name"></i> 新用户注册
                        </div>
                        <el-form :model="registerForm" ref="registerForm" :rules="registerRules">
                            请输入您的注册信息:
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="account">
                                    <el-input v-model="registerForm.account" placeholder="登录账号"
                                              suffix-icon="el-icon-mars-user-name"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="password">
                                    <el-input type="password" v-model="registerForm.password" placeholder="登录密码"
                                              suffix-icon="el-icon-mars-key"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="checkPassword">
                                    <el-input type="password" v-model="registerForm.checkPassword" placeholder="确认密码"
                                              suffix-icon="el-icon-mars-retweet"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="mobile">
                                    <el-input v-model="registerForm.mobile" placeholder="手机号码"
                                              suffix-icon="el-icon-mars-msg"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="email">
                                    <el-input v-model="registerForm.email" placeholder="邮箱地址"
                                              suffix-icon="el-icon-mars-msg"></el-input>
                                </el-form-item>
                            </label>
                            <div class="register-access-btn">
                                <label>
                                    <el-checkbox v-model="registerForm.accept">我接受</el-checkbox>
                                    <a href="javascript:;">用户协议</a>
                                </label>

                            </div>
                            <div class="register-btn">
                                <label>
                                    <el-button type="primary" icon="el-icon-mars-reset" @click="handleResetRegisterForm">重置
                                    </el-button>
                                </label>
                                <label>
                                    <el-button type="success" style="width: 200px;" @click="handleRegister">注册 <i
                                            class="el-icon-mars-right2 el-icon--right"></i></el-button>
                                </label>
                            </div>

                        </el-form>

                    </div>
                    <div class="toolbar center register">
                        <a href="javascript:;" class="forgot-register-link" @click="back"><i
                                class="el-icon-mars-arrowlefticon"></i> 返回登录</a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import {Message} from 'element-ui'
    import { setRememberAccountInfo, getRememberAccountInfo, removeRememberAccountInfo } from '@/utils/cookie'

    export default {
        name: 'index',
        data() {
            const validateUsername = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('账号不能为空'))
                }
                callback()
            }
            const validatePassword = (rule, value, callback) => {
                if (value.length < 4) {
                    callback(new Error('密码不能小于4位'))
                }
                callback()
            }
            const validatePasswordDoubleCheck = (rule, value, callback) => {
                if (this.registerForm.password != this.registerForm.checkPassword) {
                    callback(new Error('密码不一致'))
                }
                callback()
            }
            return {
                visibleLogin: true,
                visibleForget: false,
                visibleRegister: false,
                loading: false,
                msg: '',
                success: false,
                showMsg: false,
                loginBtoDisabled: false,
                loginForm: {
                    account: null,
                    password: null,
                    remember: false
                },
                forgetForm: {
                    email: ''
                },
                registerForm: {
                    account: '',
                    password: '',
                    checkPassword: '',
                    mobile: '',
                    email: '',
                    accept: ''
                },
                loginRules: {
                    account: [{required: true, trigger: 'blur', validator: validateUsername}],
                    password: [{required: true, trigger: 'blur', validator: validatePassword}]
                },
                forgetRules: {
                    email: [
                        {required: true, message: '邮件地址不能为空', trigger: 'blur'},
                        {type: 'email', message: '邮件格式不正确', trigger: 'blur'}
                    ]
                },
                registerRules: {
                    account: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {max: 15, message: '最多 15 个字符', trigger: 'blur'}
                    ],
                    checkPassword: [{required: true, trigger: 'blur', validator: validatePasswordDoubleCheck}],
                    mobile: [
                        {required: true, message: '请输入手机号码'},
                        {message: '手机必须为11位数字', pattern: /^1(3|4|5|7|8)\d{9}$/}
                    ],
                    email: [
                        {required: true, message: '邮件地址不能为空', trigger: 'blur'},
                        {type: 'email', message: '邮件格式不正确', trigger: 'blur'}
                    ]
                }

            }
        },
        created() {
            const remember = getRememberAccountInfo()
            if(remember) {
                this.loginForm.remember = true
                this.loginForm.account = remember[0]
                this.loginForm.password = remember[1]
            }
        },
        methods: {
            handleLogin() {
                this.showMsg = false
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.loginBtoDisabled = true

                        this.$store.dispatch('Login', this.loginForm).then(response => {
                            this.success = response.data.status
                            //this.msg = response.data.message
                            //this.showMsg = true

                            //登录成功跳转到主页
                            if(this.success) {
                                Message.success({
                                    duration: 500,
                                    message: response.data.message,
                                    onClose: ()=>{
                                        if(this.loginForm.remember) {
                                            //记住账号密码
                                            setRememberAccountInfo(this.loginForm.account, this.loginForm.password)
                                        } else {
                                            removeRememberAccountInfo()
                                        }
                                        this.$router.replace({ path: '/' })
                                    }
                                });
                                /**/
                            } else {
                                this.loginBtoDisabled = false
                                this.loading = false
                                Message.error({message: response.data.message});
                            }

                        }).catch((error) => {
                            this.loginBtoDisabled = false
                            this.loading = false
                            this.showMsg = true
                            this.success = false
                            if(!error.status) {
                                this.msg = error.msg
                                console.log(error.msg)
                            }
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            closeMessage() {
                console.log(12333)
            },
            handleForgetPassword() {
                console.log(this.forgetForm)
            },
            handleRegister() {
                console.log(this.registerForm)
            },
            handleResetRegisterForm() {
                this.$refs.registerForm.resetFields()
            },
            forget() {
                this.visibleLogin = false
                this.visibleForget = true
                this.visibleRegister = false
            },
            back() {
                this.visibleLogin = true
                this.visibleForget = false
                this.visibleRegister = false
            },
            register() {
                this.visibleLogin = false
                this.visibleForget = false
                this.visibleRegister = true
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./login";

</style>
